<template>
  <div class="app-container" v-loading="loading">
    <h1 style="text-align: center">餐馆类别性价比</h1>
    <h5 style="text-align: center">性价比最高的餐饮类别为:{{ this.data && this.data[0]['_1'] }}</h5>
    <el-row style="margin-top: 35px">
      <el-col :span="7" :offset="9" style="padding-left: 1.5%">
        餐饮类别：
        <el-select @change="change" v-model="selectedTypes" placeholder="请选择">
          <el-option
              label="所有"
              value="all">
          </el-option>
          <el-option
              v-for="i in types"
              :key="i"
              :label="i"
              :value="i">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <div ref="barChart" style="width: 100%;height: 180vh"></div>
  </div>
</template>

<script>
import request from "@/utils/request";
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

export default {
  name: "type",
  data() {
    return {
      types: [],
      selectedTypes: 'all',
      data: null,
      loading: true
    }
  },
  created() {
    this.getTypes()
    this.init(this.selectedTypes)
  },

  methods: {
    getTypes() {
      request({
        url: '/data/types',
        method: 'GET',
      }).then(v => {
        this.types = v.data
      })
    },
    change(type) {
      this.initBar()
      let top = this.$refs.barChart.getBoundingClientRect().top;
      let pageY = window.pageYOffset;
      window.scrollTo(0, top + pageY)
    },
    init(type) {
      request({
        url: '/data/costPerformance',
        method: 'GET',
        params: {type}
      }).then(v => {
        this.loading = false
        this.data = v.data
        this.initBar()
      })
    },
    initBar() {
      const chart = echarts.init(this.$refs.barChart);
      const option = {

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: this.data.map(v => v._1).reverse()
        },
        series: [
          {
            name: '性价比',
            type: 'bar',
            label: {
              show: true,
              color: 'red',
              position: 'right',
              formatter: this.dataFormat
            },
            itemStyle: {
              normal: {
                opacity: this.selectedTypes === 'all' ? 0.8 : 0.6,
                color: '#457fc6',
              },
              shadowBlur: 1
            },
            data: this.data.map(v => {
              if (this.selectedTypes === v._1) {
                return {
                  value: v._2,
                  itemStyle: {
                    opacity: 1,
                    color: 'red',
                  }
                }
              } else {
                return v._2
              }
            }).reverse()
          }
        ]
      };
      chart.setOption(option);
    },
    dataFormat(data) {
      return data.value.toFixed(2)
    }
  }
}
</script>

<style scoped>

</style>
